{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword,sendKeyWord %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jqgird_css'
    '@jquery_ui_css'
    '@gritter_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    {{ gridKeyword('Phone group name'|trans) }}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    <div id="dialog-confirm" class="hide row form-horizontal page-content">
        <div class="form-group">
            <label class="col-xs-2 col-sm-3">{{ 'Phone group name'|trans }}</label>
            <input type="text" id="groupname" value="" class="col-xs-10 col-sm-9" style="width: auto" maxlength="20" />
        </div>
        <div class="hide row" id="remark-confirm" style="text-align: center;margin-top: 2px">
            <span id="prompt" style="color: red"></span>
        </div>
        <div class="form-group">
            <label class="col-xs-2 col-sm-3" for="form-field-1">{{ 'Add Phones'|trans }}</label>
                <select multiple="" class="chosen-select col-sm-9" data-placeholder="{{ 'all'|trans }}" id="phone_id" name="phone_id[]">

                </select>

        </div>
        <div class="form-group">
            <label class="col-xs-2 col-sm-3">{{ 'Remark'|trans }}</label>
            <textarea id="add_remark" value="" class="col-xs-10 col-sm-9" style="width: auto" maxlength="20"></textarea>
        </div>
        <div class="form-group" style="text-align: center">
            <button id="remark-btns" type="button" class="btn btn-success btn-sm" data-loading-text="Loading...">
                {{ 'Save'|trans }}
            </button>
        </div>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@gritter_js'
    '@jquery_ui_js'
    '@common_js'
    '@chosen_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var rowId = 0;
        var oper;
        jQuery(function($) {
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                url: "{{ path('icsoc_phonegroup_list') }}",  //数据；
                colNames:['{{ 'actions'|trans }}', '{{ 'Phone group name'|trans }}', '{{ 'Phone'|trans }}', '{{ 'Remark'|trans }}', '{{ 'Number'|trans }}'],
                colModel:[
                    {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
                        formatter:'actions',
                        formatoptions:{
                            keys:true,
                            editbutton:true,
                            editformbutton: true,
                            delOptions:{recreateForm: true,beforeShowForm:beforeDeleteCallback, afterSubmit:afterDeleteCallback,left:540,top:206},
                            editOptions:{width: "0",height: "0", jqModal:false, display:'none', beforeShowForm:beforeEditCallback }
                        }
                    },
                    {name:'group_name',index:'group_name',width:250, editable: true, sortable:false},
                    {name:'phone',index:'phone',width:300, editable: true, sortable:false},
                    {name:'remark',index:'remark',width:250, editable: true, sortable:false},
                    {name:'id',index:'id',hidden:true,editable: true, key:true, sortable:false}

                ],
                {{ gridConfig() }}
                sortname: 'id',
                editurl: "{{ path('icsoc_phonegroup_allot') }}",
                caption: "{{ 'Phone group table'|trans }}",
                onSelectRow:function(id,status){
                    rowId = id;
                }
            });
            {{ gridNav(false,false,true,false,true,false,false,false,'Delete Phone Group'|trans()) }}
            jQuery(grid_selector).jqGrid('navGrid',pager_selector).navButtonAdd(pager_selector,{caption:'',title:'{{ 'Add'|trans }}',buttonicon:'ace-icon fa fa-plus-circle purple',onClickButton:function(){
                addgroup();
            }});
        });

        {{ sendKeyWord() }}
        function beforeEditCallback(e){
            editgroup();
        }

        //添加
        function addgroup(){
            $('#groupname').val('');
            $('#add_remark').val('');
            $("#remark-confirm").addClass('hide');
            oper = 'add';
            $('#groupname').val('');
            $('#phone_id').html('');
            $('.chosen-select').trigger('chosen:updated');
            $( "#dialog-confirm" ).removeClass('hide').dialog({
                resizable: false,
                modal: false,
                title_html: true,
                height:250,
                width:350,
                title: "{{ 'Add phone Group'|trans }}"
            });

            $.ajax({
                url: "{{ path('icsoc_phonegroup_index') }}",
                dataType: 'json',
                type: 'post',
                success: function(e){
                    var str='';
                for(var i=0;i<e['all'].length;i++){
                    str+="<option value="+e['all'][i]['phone_id']+">"+e['all'][i]['phone']+"</option>";
                }
                $('#phone_id').html(str);
                $('.chosen-select').chosen();
                $(window).on('resize.chosen', function () {
                    $('#phone_id').next().css({'width': 170});
                    $('#phone_id').addClass('tag-input-style')
                }).trigger('resize.chosen');
                $('.chosen-select').trigger('chosen:updated');
            }
            });
        }

        //修改
        function editgroup(){
            var rowData = $("#grid-table").jqGrid('getRowData',rowId);
            $("#lui_grid-table").remove();
            $("#remark-confirm").addClass('hide');
            oper = 'edit';
            $('#groupname').val(rowData.group_name);
            $('#add_remark').val(rowData.remark);
            $('#phone_id').html('');
            $('.chosen-select').trigger('chosen:updated');
            $( "#dialog-confirm" ).removeClass('hide').dialog({
                resizable: false,
                modal: false,
                title_html: true,
                height:250,
                width:350,

                title: "{{ 'Add phone Group'|trans }}"
            });

            $.ajax({
                url: "{{ path('icsoc_phonegroup_index') }}",
                dataType: 'json',
                data:{id:rowId},
                type: 'post',
                success: function(e){
                    var str='';
                    for(var i=0;i<e['all'].length;i++){
                        str+="<option value="+e['all'][i]['phone_id']+">"+e['all'][i]['phone']+"</option>";
                    }
                    for(var i=0;i<e['old'].length;i++){
                        str+="<option selected value="+e['old'][i]['phone_id']+">"+e['old'][i]['phone']+"</option>";
                    }
                    $('#phone_id').html(str);
                    $('.chosen-select').chosen();
                    $(window).on('resize.chosen', function () {
                        $('#phone_id').next().css({'width': 170});
                        $('#phone_id').addClass('tag-input-style')
                    }).trigger('resize.chosen');
                    $('.chosen-select').trigger('chosen:updated');
                }
            });
        }

        //保存
        $('#remark-btns').on('click', function(){
            var groupname = $.trim($('#groupname').val());
            var phoneId = $.trim($('#phone_id').val());
            var add_remark = $('#add_remark').val();
            if (!groupname) {
                gritterAlert("{{ 'Alert'|trans }}", "号码组名称不能为空", 'error');
                $("#remark-confirm").removeClass('hide');
                $("#groupname").focus();
                return false;
            }
            if(phoneId == '') {
                gritterAlert("{{ 'Alert'|trans }}", "号码不能为空", 'error');
                return;
            }
            $.ajax({
                url: "{{ path('icsoc_phonegroup_allot') }}",
                dataType: 'json',
                data: {oper:oper, group_name: groupname,phoneId:phoneId,remark:add_remark,id: rowId},
                type: 'post',
                success: function(response) {
                    if (response.code == 200) {
                        switch (oper){
                            case 'edit':
                                gritterAlert("{{ 'Alert'|trans }}", "修改成功", 'success');
                                break;
                            case 'add':
                                gritterAlert("{{ 'Alert'|trans }}", "添加成功", 'success');
                                break;
                        }
                        $('#groupname').val('');
                        $("#remark-confirm").addClass('hide');
                        $("#dialog-confirm").dialog("close");
                        jQuery("#grid-table").trigger('reloadGrid');
                    } else {
                        gritterAlert("{{ 'Alert'|trans }}", response.message, 'error');
                        $("#remark-confirm").removeClass('hide');
                        $("#groupname").focus();
                    }
                }
            });
        });
    </script>
{% endblock %}